React์ experimental_useTransition์ผ๋ก ๋ฐ์ด๋ UI ๋ฐ์์ฑ์ ๊ตฌํํ์ธ์. ์ ๋ฐ์ดํธ ์ฐ์ ์์๋ฅผ ์ ํ๊ณ , ๋ฒ๋ฒ ๊ฑฐ๋ฆผ์ ๋ฐฉ์งํ๋ฉฐ, ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์ํํ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ์ธ์.
UI ๋ฐ์์ฑ ๋ง์คํฐํ๊ธฐ: ์ฐ์ ์์ ๊ด๋ฆฌ๋ฅผ ์ํ React์ experimental_useTransition ์ฌ์ธต ๋ถ์
์ญ๋์ ์ธ ์น ๊ฐ๋ฐ์ ์ธ๊ณ์์ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ฅ ์ค์ํฉ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ธฐ๋ฅ์ ์ผ ๋ฟ๋ง ์๋๋ผ ๋ฏฟ์ ์ ์์ ์ ๋๋ก ๋ฐ์์ด ๋นจ๋ผ์ผ ํฉ๋๋ค. ๋ณต์กํ ์์ ์ค์ ๋ฉ์ถ๋ ๋๋ฆฌ๊ณ ๋ฒ๋ฒ ๊ฑฐ๋ฆฌ๋ ์ธํฐํ์ด์ค๋ณด๋ค ์ฌ์ฉ์๋ฅผ ๋ ์ข์ ์ํค๋ ๊ฒ์ ์์ต๋๋ค. ์ต์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ธ์ง๋ ์ฑ๋ฅ์ ํฌ์ํ์ง ์์ผ๋ฉด์ ๋ฌด๊ฑฐ์ด ๋ฐ์ดํฐ ์ฒ๋ฆฌ, ๋ ๋๋ง, ๋คํธ์ํฌ ์์ฒญ๊ณผ ํจ๊ป ๋ค์ํ ์ฌ์ฉ์ ์ํธ์์ฉ์ ๊ด๋ฆฌํด์ผ ํ๋ ๊ณผ์ ์ ์ข ์ข ์ง๋ฉดํฉ๋๋ค.
์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ถ์ ์ํ ์ ๋์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ React๋ ์ด๋ฌํ ๊ณผ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์ง์์ ์ผ๋ก ๋ฐ์ ํด ์์ต๋๋ค. ์ด ์ฌ์ ์์ ์ค์ถ์ ์ธ ๋ฐ์ ์ React๊ฐ ์ฌ๋ฌ ๋ฒ์ ์ UI๋ฅผ ๋์์ ์ค๋นํ ์ ์๊ฒ ํด์ฃผ๋ ์๋ก์ด ๊ธฐ๋ฅ ๋ชจ์์ธ Concurrent React์ ๋์
์
๋๋ค. ๋ฐ์์ฑ์ ์ ์งํ๊ธฐ ์ํ Concurrent React ์ ๊ทผ ๋ฐฉ์์ ํต์ฌ์๋ experimental_useTransition๊ณผ ๊ฐ์ ํ
์ ์ํด ๊ตฌ๋๋๋ "์ ํ(Transitions)"์ด๋ผ๋ ๊ฐ๋
์ด ์์ต๋๋ค.
์ด ์ข
ํฉ ๊ฐ์ด๋์์๋ experimental_useTransition์ ํ๊ตฌํ๋ฉฐ, ์
๋ฐ์ดํธ ์ฐ์ ์์๋ฅผ ๊ด๋ฆฌํ๊ณ , UI ๋ฉ์ถค ํ์์ ๋ฐฉ์งํ๋ฉฐ, ๊ถ๊ทน์ ์ผ๋ก ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์ ์ฐํ๊ณ ๋งค๋ ฅ์ ์ธ ๊ฒฝํ์ ๋ง๋๋ ๋ฐ ์์ด ๊ทธ๊ฒ์ ์ค์ํ ์ญํ ์ ์ค๋ช
ํ ๊ฒ์
๋๋ค. ์ฐ๋ฆฌ๋ ๊ทธ๊ฒ์ ๋ฉ์ปค๋์ฆ, ์ค์ ์ ์ฉ ์ฌ๋ก, ๋ชจ๋ฒ ์ฌ๋ก ๋ฐ ๋ชจ๋ React ๊ฐ๋ฐ์์๊ฒ ํ์์ ์ธ ๋๊ตฌ๋ก ๋ง๋๋ ๊ธฐ๋ณธ ์์น์ ๋ํด ๊น์ด ํ๊ณ ๋ค ๊ฒ์
๋๋ค.
React์ ๋์์ฑ ๋ชจ๋์ ์ ํ์ ํ์์ฑ ์ดํดํ๊ธฐ
experimental_useTransition์ ๋ํด ์์๋ณด๊ธฐ ์ ์ React์ ๋์์ฑ ๋ชจ๋์ ๊ธฐ๋ณธ ๊ฐ๋
์ ํ์
ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ญ์ฌ์ ์ผ๋ก React๋ ์
๋ฐ์ดํธ๋ฅผ ๋๊ธฐ์ ์ผ๋ก ๋ ๋๋งํ์ต๋๋ค. ์
๋ฐ์ดํธ๊ฐ ์์๋๋ฉด React๋ ์ ์ฒด UI๊ฐ ๋ค์ ๋ ๋๋ง๋ ๋๊น์ง ๋ฉ์ถ์ง ์์์ต๋๋ค. ์์ธก ๊ฐ๋ฅํ๊ธฐ๋ ํ์ง๋ง, ์ด ์ ๊ทผ ๋ฐฉ์์ ํนํ ์
๋ฐ์ดํธ๊ฐ ๊ณ์ฐ ์ง์ฝ์ ์ด๊ฑฐ๋ ๋ณต์กํ ์ปดํฌ๋ํธ ํธ๋ฆฌ๋ฅผ ํฌํจํ ๋ "๋ฒ๋ฒ
๊ฑฐ๋ฆฌ๋(janky)" ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ์ด์ด์ง ์ ์์์ต๋๋ค.
์ฌ์ฉ์๊ฐ ๊ฒ์์ฐฝ์ ์ ๋ ฅํ๋ ์ํฉ์ ์์ํด ๋ณด์ธ์. ๊ฐ ํค ์ ๋ ฅ์ ์ ๋ ฅ ๊ฐ์ ํ์ํ๊ธฐ ์ํ ์ ๋ฐ์ดํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํ์ง๋ง, ์ ์ฌ์ ์ผ๋ก ๋๊ท๋ชจ ๋ฐ์ดํฐ์ ์ ๋ํ ํํฐ๋ง ์์ ์ด๋ ๊ฒ์ ์ ์์ ์ํ ๋คํธ์ํฌ ์์ฒญ๋ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค. ๋ง์ฝ ํํฐ๋ง์ด๋ ๋คํธ์ํฌ ์์ฒญ์ด ๋๋ฆฌ๋ค๋ฉด UI๊ฐ ์ ์ ๋ฉ์ถฐ ์ ๋ ฅ ํ๋๊ฐ ๋ฐ์ํ์ง ์๋ ๊ฒ์ฒ๋ผ ๋๊ปด์ง ์ ์์ต๋๋ค. ์ด ์ง์ฐ์ ์๋ฌด๋ฆฌ ์งง๋๋ผ๋ ์ฌ์ฉ์์ ์ ํ๋ฆฌ์ผ์ด์ ํ์ง์ ๋ํ ์ธ์์ ํฌ๊ฒ ์ ํ์ํต๋๋ค.
๋์์ฑ ๋ชจ๋๋ ์ด ํจ๋ฌ๋ค์์ ๋ฐ๊ฟ๋๋ค. React๊ฐ ์ ๋ฐ์ดํธ๋ฅผ ๋น๋๊ธฐ์ ์ผ๋ก ์์ ํ๊ณ , ๊ฒฐ์ ์ ์ผ๋ก ๋ ๋๋ง ์์ ์ ์ค๋จํ๊ณ ์ผ์ ์ค์งํ ์ ์๊ฒ ํฉ๋๋ค. ๋ง์ฝ ๋ ๊ธด๊ธํ ์ ๋ฐ์ดํธ(์: ์ฌ์ฉ์๊ฐ ๋ค๋ฅธ ๋ฌธ์๋ฅผ ์ ๋ ฅํ๋ ๊ฒ)๊ฐ ๋์ฐฉํ๋ฉด, React๋ ํ์ฌ ๋ ๋๋ง์ ์ค๋จํ๊ณ ๊ธด๊ธํ ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ ๋ค์ ๋์ค์ ์ค๋จ๋ ์์ ์ ์ฌ๊ฐํ ์ ์์ต๋๋ค. ์ด์ฒ๋ผ ์์ ์ ์ฐ์ ์์๋ฅผ ์ ํ๊ณ ์ค๋จํ ์ ์๋ ๋ฅ๋ ฅ์ด ๋ฐ๋ก "์ ํ"์ด๋ผ๋ ๊ฐ๋ ์ ๋ณ์์ต๋๋ค.
"๋ฒ๋ฒ ๊ฑฐ๋ฆผ(Jank)"๊ณผ ๋ธ๋กํน ์ ๋ฐ์ดํธ์ ๋ฌธ์
"๋ฒ๋ฒ ๊ฑฐ๋ฆผ"์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค์์ ๋ฐ์ํ๋ ๋ชจ๋ ๋๊น์ด๋ ๋ฉ์ถค ํ์์ ์๋ฏธํฉ๋๋ค. ์ด๋ ์ข ์ข ์ฌ์ฉ์ ์ ๋ ฅ ์ฒ๋ฆฌ์ ๋ ๋๋ง์ ๋ด๋นํ๋ ๋ฉ์ธ ์ค๋ ๋๊ฐ ์ค๋ ์คํ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ ์ ์ํด ์ฐจ๋จ๋ ๋ ๋ฐ์ํฉ๋๋ค. ์ ํต์ ์ธ ๋๊ธฐ์ React ์ ๋ฐ์ดํธ์์ ์๋ก์ด ์ํ๋ฅผ ๋ ๋๋งํ๋ ๋ฐ 100ms๊ฐ ๊ฑธ๋ฆฐ๋ค๋ฉด, ๊ทธ ์ ์ฒด ์๊ฐ ๋์ UI๋ ๋ฐ์ํ์ง ์๋ ์ํ๋ก ๋จ์์์ต๋๋ค. ์ด๋ ์ฌ์ฉ์๊ฐ ํ์ดํ, ๋ฒํผ ํด๋ฆญ, ํ์๊ณผ ๊ฐ์ ์ง์ ์ ์ธ ์ํธ์์ฉ์ ๋ํด ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ๊ธฐ๋ํ๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๊ฐ ๋ฉ๋๋ค.
๋์์ฑ ๋ชจ๋์ ์ ํ์ ํตํ React์ ๋ชฉํ๋ ๋ฌด๊ฑฐ์ด ๊ณ์ฐ ์์ ์ค์๋ UI๊ฐ ๊ธด๊ธํ ์ฌ์ฉ์ ์ํธ์์ฉ์ ๋ฐ์์ฑ์ ์ ์งํ๋๋ก ๋ณด์ฅํ๋ ๊ฒ์ ๋๋ค. ์ด๋ *์ง๊ธ ๋น์ฅ* ์ผ์ด๋์ผ ํ๋ ์ ๋ฐ์ดํธ(๊ธด๊ธ)์ ๊ธฐ๋ค๋ฆฌ๊ฑฐ๋ ์ค๋จ๋ ์ ์๋ ์ ๋ฐ์ดํธ(๊ธด๊ธํ์ง ์์)๋ฅผ ๊ตฌ๋ณํ๋ ๊ฒ์ ๊ดํ ๊ฒ์ ๋๋ค.
์ ํ(Transitions) ์๊ฐ: ์ค๋จ ๊ฐ๋ฅํ๊ณ ๊ธด๊ธํ์ง ์์ ์ ๋ฐ์ดํธ
React์์ "์ ํ"์ ๊ธด๊ธํ์ง ์์ ๊ฒ์ผ๋ก ํ์๋ ์ํ ์ ๋ฐ์ดํธ์ ์งํฉ์ ์๋ฏธํฉ๋๋ค. ์ ๋ฐ์ดํธ๊ฐ ์ ํ์ผ๋ก ๊ฐ์ธ์ง๋ฉด, React๋ ๋ ๊ธด๊ธํ ์์ ์ด ๋ฐ์ํด์ผ ํ ๊ฒฝ์ฐ ์ด ์ ๋ฐ์ดํธ๋ฅผ ์ฐ๊ธฐํ ์ ์์์ ์ดํดํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ํํฐ๋ง ์์ (๊ธด๊ธํ์ง ์์ ์ ํ)์ ์์ํ ์งํ ๋ค๋ฅธ ๋ฌธ์(๊ธด๊ธํ ์ ๋ฐ์ดํธ)๋ฅผ ์ ๋ ฅํ๋ฉด, React๋ ์ ๋ ฅ ํ๋์ ๋ฌธ์๋ฅผ ๋ ๋๋งํ๋ ๊ฒ์ ์ฐ์ ์ํ๊ณ , ์งํ ์ค์ธ ํํฐ๋ง ์ ๋ฐ์ดํธ๋ฅผ ์ผ์ ์ค์งํ๊ฑฐ๋ ์ฌ์ง์ด ํ๊ธฐํ ๋ค์, ๊ธด๊ธํ ์์ ์ด ์๋ฃ๋๋ฉด ๋ค์ ์์ํฉ๋๋ค.
์ด ์ง๋ฅ์ ์ธ ์ค์ผ์ค๋ง์ ํตํด React๋ ๋ฐฑ๊ทธ๋ผ์ด๋ ์์ ์ด ์คํ๋๋ ๋์์๋ UI๋ฅผ ๋ถ๋๋ฝ๊ณ ์ํธ์์ฉ์ ์ผ๋ก ์ ์งํ ์ ์์ต๋๋ค. ์ ํ์ ํนํ ํ๋ถํ ๋ฐ์ดํฐ ์ํธ์์ฉ์ด ์๋ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ง์ ์ผ๋ก ๋ฐ์์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ฌ์ฑํ๋ ๋ฐ ํต์ฌ์ ์ ๋๋ค.
experimental_useTransition ์ฌ์ธต ๋ถ์
experimental_useTransition ํ
์ ํจ์ํ ์ปดํฌ๋ํธ ๋ด์์ ์ํ ์
๋ฐ์ดํธ๋ฅผ ์ ํ์ผ๋ก ํ์ํ๋ ์ฃผ์ ๋ฉ์ปค๋์ฆ์
๋๋ค. ์ด๊ฒ์ React์๊ฒ "์ด ์
๋ฐ์ดํธ๋ ๊ธด๊ธํ์ง ์์ผ๋, ๋ ์ค์ํ ์ผ์ด ์๊ธฐ๋ฉด ์ง์ฐ์ํค๊ฑฐ๋ ์ค๋จํด๋ ๋ผ."๋ผ๊ณ ๋งํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
ํ ์ ์๊ทธ๋์ฒ์ ๋ฐํ ๊ฐ
๋ค์๊ณผ ๊ฐ์ด ํจ์ํ ์ปดํฌ๋ํธ์์ experimental_useTransition์ ๊ฐ์ ธ์ ์ฌ์ฉํ ์ ์์ต๋๋ค:
import { experimental_useTransition } from 'react';
function MyComponent() {
const [isPending, startTransition] = experimental_useTransition();
// ... ๋๋จธ์ง ์ปดํฌ๋ํธ ๋ก์ง
}
์ด ํ ์ ๋ ๊ฐ์ ๊ฐ์ ํฌํจํ๋ ํํ์ ๋ฐํํฉ๋๋ค:
-
isPending(boolean): ์ด ๊ฐ์ ์ ํ์ด ํ์ฌ ํ์ฑ ์ํ์ธ์ง ์ฌ๋ถ๋ฅผ ๋ํ๋ ๋๋ค.true์ผ ๊ฒฝ์ฐ, React๊ฐstartTransition์ผ๋ก ๊ฐ์ธ์ง ๊ธด๊ธํ์ง ์์ ์ ๋ฐ์ดํธ๋ฅผ ๋ ๋๋งํ๋ ๊ณผ์ ์ ์์์ ์๋ฏธํฉ๋๋ค. ์ด๊ฒ์ ๋ก๋ฉ ์คํผ๋๋ ํ๋ฆฌ๊ฒ ์ฒ๋ฆฌ๋ UI ์์์ ๊ฐ์ด ์ฌ์ฉ์์๊ฒ ์๊ฐ์ ํผ๋๋ฐฑ์ ์ ๊ณตํ๋ ๋ฐ ๋งค์ฐ ์ ์ฉํ๋ฉฐ, ์ฌ์ฉ์์ ์ํธ์์ฉ์ ์ฐจ๋จํ์ง ์์ผ๋ฉด์ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ฌด์ธ๊ฐ ์ผ์ด๋๊ณ ์์์ ์๋ ค์ค๋๋ค. -
startTransition(function): ์ด๊ฒ์ ๊ธด๊ธํ์ง ์์ ์ํ ์ ๋ฐ์ดํธ๋ฅผ ๊ฐ์ธ๊ธฐ ์ํด ํธ์ถํ๋ ํจ์์ ๋๋ค.startTransition์ ์ ๋ฌ๋ ์ฝ๋ฐฑ ๋ด์์ ์ํ๋๋ ๋ชจ๋ ์ํ ์ ๋ฐ์ดํธ๋ ์ ํ์ผ๋ก ์ฒ๋ฆฌ๋ฉ๋๋ค. ๊ทธ๋ฌ๋ฉด React๋ ์ด๋ฌํ ์ ๋ฐ์ดํธ๋ฅผ ๋ฎ์ ์ฐ์ ์์๋ก ์ค์ผ์ค๋งํ์ฌ ์ค๋จ ๊ฐ๋ฅํ๊ฒ ๋ง๋ญ๋๋ค.
์ผ๋ฐ์ ์ธ ํจํด์ ์ํ ์
๋ฐ์ดํธ ๋ก์ง์ ํฌํจํ๋ ์ฝ๋ฐฑ ํจ์์ ํจ๊ป startTransition์ ํธ์ถํ๋ ๊ฒ์
๋๋ค:
startTransition(() => {
// ์ด ์ฝ๋ฐฑ ๋ด์ ๋ชจ๋ ์ํ ์
๋ฐ์ดํธ๋ ๊ธด๊ธํ์ง ์์ ๊ฒ์ผ๋ก ๊ฐ์ฃผ๋ฉ๋๋ค
setSomeState(newValue);
setAnotherState(anotherValue);
});
์ ํ ์ฐ์ ์์ ๊ด๋ฆฌ์ ์๋ ๋ฐฉ์
experimental_useTransition์ ํต์ฌ์ ์ธ ์ฅ์ ์ React์ ๋ด๋ถ ์ค์ผ์ค๋ฌ๊ฐ ์ฐ์ ์์๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์๊ฒ ํ๋ ๋ฅ๋ ฅ์ ์์ต๋๋ค. ์ด๋ ๋ ๊ฐ์ง ์ฃผ์ ์ ํ์ ์
๋ฐ์ดํธ๋ฅผ ๊ตฌ๋ณํฉ๋๋ค:
- ๊ธด๊ธ ์ ๋ฐ์ดํธ: ์ข ์ข ์ฌ์ฉ์ ์ํธ์์ฉ๊ณผ ์ง์ ์ ์ผ๋ก ๊ด๋ จ๋ ์ฆ๊ฐ์ ์ธ ์ฃผ์๊ฐ ํ์ํ ์ ๋ฐ์ดํธ์ ๋๋ค. ์๋ก๋ ์ ๋ ฅ ํ๋์ ํ์ดํ, ๋ฒํผ ํด๋ฆญ, ์์ ์๋ก ๋ง์ฐ์ค ์ฌ๋ฆฌ๊ธฐ, ํ ์คํธ ์ ํ ๋ฑ์ด ์์ต๋๋ค. React๋ UI๊ฐ ์ฆ๊ฐ์ ์ด๊ณ ๋ฐ์์ ์ผ๋ก ๋๊ปด์ง๋๋ก ์ด๋ฌํ ์ ๋ฐ์ดํธ๋ฅผ ์ฐ์ ์ฒ๋ฆฌํฉ๋๋ค.
-
๊ธด๊ธํ์ง ์์ (์ ํ) ์
๋ฐ์ดํธ: ์ฆ๊ฐ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ํฌ๊ฒ ์ ํ์ํค์ง ์์ผ๋ฉด์ ์ฐ๊ธฐ๋๊ฑฐ๋ ์ค๋จ๋ ์ ์๋ ์
๋ฐ์ดํธ์
๋๋ค. ์๋ก๋ ํฐ ๋ชฉ๋ก ํํฐ๋ง, API์์ ์ ๋ฐ์ดํฐ ๋ก๋, ์๋ก์ด UI ์ํ๋ก ์ด์ด์ง๋ ๋ณต์กํ ๊ณ์ฐ, ๋ฌด๊ฑฐ์ด ๋ ๋๋ง์ด ํ์ํ ์ ๊ฒฝ๋ก๋ก์ ์ด๋ ๋ฑ์ด ์์ต๋๋ค. ์ด๊ฒ๋ค์ด
startTransition์ผ๋ก ๊ฐ์ธ์ผ ํ ์ ๋ฐ์ดํธ์ ๋๋ค.
์ ํ ์ ๋ฐ์ดํธ๊ฐ ์งํ ์ค์ธ ๋์ ๊ธด๊ธ ์ ๋ฐ์ดํธ๊ฐ ๋ฐ์ํ๋ฉด React๋ ๋ค์์ ์ํํฉ๋๋ค:
- ์งํ ์ค์ธ ์ ํ ์์ ์ ์ผ์ ์ค์งํฉ๋๋ค.
- ์ฆ์ ๊ธด๊ธ ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ๊ณ ๋ ๋๋งํฉ๋๋ค.
- ๊ธด๊ธ ์ ๋ฐ์ดํธ๊ฐ ์๋ฃ๋๋ฉด, React๋ ์ผ์ ์ค์ง๋ ์ ํ ์์ ์ ์ฌ๊ฐํ๊ฑฐ๋, ์ํ๊ฐ ๋ณ๊ฒฝ๋์ด ์ด์ ์ ํ ์์ ์ด ๋ฌด๊ดํด์ง ๊ฒฝ์ฐ ์ด์ ์์ ์ ํ๊ธฐํ๊ณ ์ต์ ์ํ๋ก ์๋ก์ด ์ ํ์ ์ฒ์๋ถํฐ ์์ํ ์ ์์ต๋๋ค.
์ด ๋ฉ์ปค๋์ฆ์ UI๊ฐ ๋ฉ์ถ๋ ๊ฒ์ ๋ฐฉ์งํ๋ ๋ฐ ์ค์ํฉ๋๋ค. ์ฌ์ฉ์๋ ๋ณต์กํ ๋ฐฑ๊ทธ๋ผ์ด๋ ํ๋ก์ธ์ค๊ฐ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ์ง ์๊ณ ์ ์์ ์ผ๋ก ์ฒ๋ฆฌ๋๋ ๋์ ๊ณ์ํด์ ํ์ดํ, ํด๋ฆญ ๋ฐ ์ํธ์์ฉ์ ํ ์ ์์ต๋๋ค.
์ค์ฉ์ ์ธ ์ ์ฉ ๋ฐ ์ฝ๋ ์์
experimental_useTransition์ด ์ฌ์ฉ์ ๊ฒฝํ์ ๊ทน์ ์ผ๋ก ๊ฐ์ ํ ์ ์๋ ๋ช ๊ฐ์ง ์ผ๋ฐ์ ์ธ ์๋๋ฆฌ์ค๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์์ 1: ์๋ ์์ฑ ๊ฒ์/ํํฐ๋ง
์ด๊ฒ์ ์๋ง๋ ๊ฐ์ฅ ๊ณ ์ ์ ์ธ ์ฌ์ฉ ์ฌ๋ก์ผ ๊ฒ์ ๋๋ค. ํฐ ํญ๋ชฉ ๋ชฉ๋ก์ ํํฐ๋งํ๋ ๊ฒ์ ์ ๋ ฅ์ ์์ํด ๋ณด์ธ์. ์ ํ ์์ด๋ ๊ฐ ํค ์ ๋ ฅ์ด ์ ์ฒด ํํฐ๋ง๋ ๋ชฉ๋ก์ ์ฌ๋ ๋๋ง์ ์ ๋ฐํ ์ ์์ผ๋ฉฐ, ๋ชฉ๋ก์ด ๋ฐฉ๋ํ๊ฑฐ๋ ํํฐ๋ง ๋ก์ง์ด ๋ณต์กํ ๊ฒฝ์ฐ ๋์ ๋๋ ์ ๋ ฅ ์ง์ฐ์ ์ด๋ํ ์ ์์ต๋๋ค.
๋ฌธ์ ์ : ํฐ ๋ชฉ๋ก์ ํํฐ๋งํ ๋์ ์ ๋ ฅ ์ง์ฐ.
ํด๊ฒฐ์ฑ
: ํํฐ๋ง๋ ๊ฒฐ๊ณผ์ ๋ํ ์ํ ์
๋ฐ์ดํธ๋ฅผ startTransition์ผ๋ก ๊ฐ์ธ๊ณ , ์
๋ ฅ ๊ฐ ์ํ ์
๋ฐ์ดํธ๋ ์ฆ๊ฐ์ ์ผ๋ก ์ ์งํฉ๋๋ค.
import React, { useState, experimental_useTransition } from 'react';
const ALL_ITEMS = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
function FilterableList() {
const [inputValue, setInputValue] = useState('');
const [filteredItems, setFilteredItems] = useState(ALL_ITEMS);
const [isPending, startTransition] = experimental_useTransition();
const handleInputChange = (event) => {
const newInputValue = event.target.value;
setInputValue(newInputValue); // ๊ธด๊ธ ์
๋ฐ์ดํธ: ์
๋ ฅ๋ ๋ฌธ์๋ฅผ ์ฆ์ ํ์
// ๊ธด๊ธํ์ง ์์ ์
๋ฐ์ดํธ: ํํฐ๋ง์ ์ํ ์ ํ ์์
startTransition(() => {
const lowercasedInput = newInputValue.toLowerCase();
const newFilteredItems = ALL_ITEMS.filter(item =>
item.toLowerCase().includes(lowercasedInput)
);
setFilteredItems(newFilteredItems);
});
};
return (
์๋ ์์ฑ ๊ฒ์ ์์
{isPending && ํญ๋ชฉ ํํฐ๋ง ์ค...
}
{filteredItems.map((item, index) => (
- {item}
))}
);
}
์ค๋ช
: ์ฌ์ฉ์๊ฐ ์
๋ ฅํ๋ฉด setInputValue๊ฐ ์ฆ์ ์
๋ฐ์ดํธ๋์ด ์
๋ ฅ ํ๋๊ฐ ๋ฐ์์ ์ผ๋ก ์๋ํฉ๋๋ค. ๊ณ์ฐ๋์ด ๋ง์ setFilteredItems ์
๋ฐ์ดํธ๋ startTransition์ผ๋ก ๊ฐ์ธ์ ธ ์์ต๋๋ค. ์ฌ์ฉ์๊ฐ ํํฐ๋ง์ด ์งํ๋๋ ๋์ ๋ค๋ฅธ ๋ฌธ์๋ฅผ ์
๋ ฅํ๋ฉด, React๋ ์๋ก์ด setInputValue ์
๋ฐ์ดํธ๋ฅผ ์ฐ์ ์ฒ๋ฆฌํ๊ณ ์ด์ ํํฐ๋ง ์์
์ ์ผ์ ์ค์งํ๊ฑฐ๋ ํ๊ธฐํ ํ ์ต์ ์
๋ ฅ ๊ฐ์ผ๋ก ์๋ก์ด ํํฐ๋ง ์ ํ์ ์์ํฉ๋๋ค. isPending ํ๋๊ทธ๋ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ์ง ์๊ณ ๋ฐฑ๊ทธ๋ผ์ด๋ ํ๋ก์ธ์ค๊ฐ ํ์ฑ ์ํ์์ ๋ํ๋ด๋ ์ค์ํ ์๊ฐ์ ํผ๋๋ฐฑ์ ์ ๊ณตํฉ๋๋ค.
์์ 2: ๋ฌด๊ฑฐ์ด ์ฝํ ์ธ ๊ฐ ์๋ ํญ ์ ํ
๊ฐ ํญ์ ๋ ๋๋งํ๋ ๋ฐ ์๊ฐ์ด ๊ฑธ๋ฆฌ๋ ๋ณต์กํ ์ปดํฌ๋ํธ๋ ์ฐจํธ๊ฐ ํฌํจ๋ ์ ์๋ ๋ค์ค ํญ ์ ํ๋ฆฌ์ผ์ด์ ์ ์๊ฐํด ๋ณด์ธ์. ์ด ํญ๋ค ์ฌ์ด๋ฅผ ์ ํํ๋ฉด ์ ํญ์ ์ฝํ ์ธ ๊ฐ ๋๊ธฐ์ ์ผ๋ก ๋ ๋๋ง๋ ๊ฒฝ์ฐ ์ ์ ๋ฉ์ถค ํ์์ด ๋ฐ์ํ ์ ์์ต๋๋ค.
๋ฌธ์ ์ : ๋ณต์กํ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๋ ํญ์ ์ ํํ ๋ UI๊ฐ ๋ฒ๋ฒ ๊ฑฐ๋ฆผ.
ํด๊ฒฐ์ฑ
: startTransition์ ์ฌ์ฉํ์ฌ ์ ํญ์ ๋ฌด๊ฑฐ์ด ์ฝํ
์ธ ๋ ๋๋ง์ ์ง์ฐ์ํต๋๋ค.
import React, { useState, experimental_useTransition } from 'react';
// ๋ฌด๊ฑฐ์ด ์ปดํฌ๋ํธ ์๋ฎฌ๋ ์ด์
const HeavyContent = ({ label }) => {
const startTime = performance.now();
while (performance.now() - startTime < 50) { /* Simulate work */ }
return ์ด๊ฒ์ {label} ์ฝํ
์ธ ์
๋๋ค. ๋ ๋๋งํ๋ ๋ฐ ์๊ฐ์ด ์ข ๊ฑธ๋ฆฝ๋๋ค.
;
};
function TabbedInterface() {
const [activeTab, setActiveTab] = useState('tabA');
const [displayTab, setDisplayTab] = useState('tabA'); // ์ค์ ๋ก ํ์๋๋ ํญ
const [isPending, startTransition] = experimental_useTransition();
const handleTabClick = (tabName) => {
setActiveTab(tabName); // ๊ธด๊ธ: ํ์ฑ ํญ ํ์ด๋ผ์ดํธ๋ฅผ ์ฆ์ ์
๋ฐ์ดํธ
startTransition(() => {
setDisplayTab(tabName); // ๊ธด๊ธํ์ง ์์: ํ์๋ ์ฝํ
์ธ ๋ฅผ ์ ํ ๋ด์์ ์
๋ฐ์ดํธ
});
};
const getTabContent = () => {
switch (displayTab) {
case 'tabA': return ;
case 'tabB': return ;
case 'tabC': return ;
default: return null;
}
};
return (
ํญ ์ ํ ์์
{isPending ? ํญ ์ฝํ
์ธ ๋ก๋ฉ ์ค...
: getTabContent()}
);
}
์ค๋ช
: ์ฌ๊ธฐ์ setActiveTab์ ํญ ๋ฒํผ์ ์๊ฐ์ ์ํ๋ฅผ ์ฆ์ ์
๋ฐ์ดํธํ์ฌ ์ฌ์ฉ์์ ํด๋ฆญ์ด ๋ฑ๋ก๋์๋ค๋ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ์ ๊ณตํฉ๋๋ค. setDisplayTab์ ์ํด ์ ์ด๋๋ ๋ฌด๊ฑฐ์ด ์ฝํ
์ธ ์ ์ค์ ๋ ๋๋ง์ ์ ํ์ผ๋ก ๊ฐ์ธ์ ธ ์์ต๋๋ค. ์ด๋ ์ ํญ์ ์ฝํ
์ธ ๊ฐ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์ค๋น๋๋ ๋์ ์ด์ ํญ์ ์ฝํ
์ธ ๊ฐ ๊ณ์ ๋ณด์ด๊ณ ์ํธ์์ฉ ๊ฐ๋ฅํ๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ์ ์ฝํ
์ธ ๊ฐ ์ค๋น๋๋ฉด ์ด์ ์ฝํ
์ธ ๋ฅผ ๋งค๋๋ฝ๊ฒ ๋์ฒดํฉ๋๋ค. isPending ์ํ๋ ๋ก๋ฉ ํ์๊ธฐ๋ ํ๋ ์ด์คํ๋๋ฅผ ๋ณด์ฌ์ฃผ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค.
์์ 3: ์ง์ฐ๋ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ฐ UI ์ ๋ฐ์ดํธ
API์์ ๋ฐ์ดํฐ, ํนํ ๋์ฉ๋ ๋ฐ์ดํฐ์ ์ ๊ฐ์ ธ์ฌ ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ก๋ฉ ์ํ๋ฅผ ํ์ํด์ผ ํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๋๋ก๋ '๋ ๋ณด๊ธฐ' ๋ฒํผ ํด๋ฆญ๊ณผ ๊ฐ์ ์ํธ์์ฉ์ ๋ํ ์ฆ๊ฐ์ ์ธ ์๊ฐ์ ํผ๋๋ฐฑ์ด ๋ฐ์ดํฐ๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ ๋์ ์คํผ๋๋ฅผ ์ฆ์ ๋ณด์ฌ์ฃผ๋ ๊ฒ๋ณด๋ค ๋ ์ค์ํ ์ ์์ต๋๋ค.
๋ฌธ์ ์ : ์ฌ์ฉ์ ์ํธ์์ฉ์ผ๋ก ์์๋ ๋์ฉ๋ ๋ฐ์ดํฐ ๋ก๋ ์ค UI๊ฐ ๋ฉ์ถ๊ฑฐ๋ ๊ฐ์์ค๋ฌ์ด ๋ก๋ฉ ์ํ๋ฅผ ๋ณด์ฌ์ค.
ํด๊ฒฐ์ฑ
: ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์จ ํ startTransition ๋ด์์ ๋ฐ์ดํฐ ์ํ๋ฅผ ์
๋ฐ์ดํธํ์ฌ ์์
์ ๋ํ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ์ ๊ณตํฉ๋๋ค.
import React, { useState, experimental_useTransition } from 'react';
const fetchData = (delay) => {
return new Promise(resolve => {
setTimeout(() => {
const data = Array.from({ length: 20 }, (_, i) => `์ ํญ๋ชฉ ${Date.now() + i}`);
resolve(data);
}, delay);
});
};
function DataFetcher() {
const [items, setItems] = useState([]);
const [isPending, startTransition] = experimental_useTransition();
const loadMoreData = () => {
// ํด๋ฆญ์ ๋ํ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ ์๋ฎฌ๋ ์ด์
(์: ๋ฒํผ ์ํ ๋ณ๊ฒฝ, ์ฌ๊ธฐ์๋ ๋ช
์์ ์ผ๋ก ํ์๋์ง ์์)
startTransition(async () => {
// ์ด ๋น๋๊ธฐ ์์
์ ์ ํ์ ์ผ๋ถ๊ฐ ๋ ๊ฒ์
๋๋ค
const newData = await fetchData(1000); // ๋คํธ์ํฌ ์ง์ฐ ์๋ฎฌ๋ ์ด์
setItems(prevItems => [...prevItems, ...newData]);
});
};
return (
์ง์ฐ๋ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์์
{isPending && ์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๋ ์ค...
}
{items.length === 0 && !isPending && ์์ง ๋ก๋๋ ํญ๋ชฉ์ด ์์ต๋๋ค.
}
{items.map((item, index) => (
- {item}
))}
);
}
์ค๋ช
: "๋ ๋ง์ ํญ๋ชฉ ๋ก๋" ๋ฒํผ์ ํด๋ฆญํ๋ฉด startTransition์ด ํธ์ถ๋ฉ๋๋ค. ๋น๋๊ธฐ fetchData ํธ์ถ๊ณผ ํ์ setItems ์
๋ฐ์ดํธ๋ ์ด์ ๊ธด๊ธํ์ง ์์ ์ ํ์ ์ผ๋ถ๊ฐ ๋ฉ๋๋ค. isPending์ด true์ด๋ฉด ๋ฒํผ์ disabled ์ํ์ ํ
์คํธ๊ฐ ์ฆ์ ์
๋ฐ์ดํธ๋์ด ์ฌ์ฉ์์ ์์
์ ๋ํ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ์ ๊ณตํ๋ฉด์ UI๋ ์์ ํ ๋ฐ์์ฑ์ ์ ์งํฉ๋๋ค. ์ ํญ๋ชฉ์ ๋ฐ์ดํฐ๊ฐ ๋ก๋๋๊ณ ๋ ๋๋ง๋๋ฉด ๋ํ๋๋ฉฐ, ๊ธฐ๋ค๋ฆฌ๋ ๋์ ๋ค๋ฅธ ์ํธ์์ฉ์ ์ฐจ๋จํ์ง ์์ต๋๋ค.
experimental_useTransition ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
๊ฐ๋ ฅํ์ง๋ง, experimental_useTransition์ ๋ถํ์ํ ๋ณต์ก์ฑ์ ๋์
ํ์ง ์์ผ๋ฉด์ ๊ทธ ์ด์ ์ ๊ทน๋ํํ๊ธฐ ์ํด ์ ์คํ๊ฒ ์ฌ์ฉ๋์ด์ผ ํฉ๋๋ค.
- ์ง์ ์ผ๋ก ๊ธด๊ธํ์ง ์์ ์ ๋ฐ์ดํธ ์๋ณํ๊ธฐ: ๊ฐ์ฅ ์ค์ํ ๋จ๊ณ๋ ๊ธด๊ธํ๊ณ ๊ธด๊ธํ์ง ์์ ์ํ ์ ๋ฐ์ดํธ๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ๊ตฌ๋ณํ๋ ๊ฒ์ ๋๋ค. ๊ธด๊ธ ์ ๋ฐ์ดํธ๋ ์ง์ ์กฐ์ ๊ฐ์ ์ ์งํ๊ธฐ ์ํด ์ฆ์ ๋ฐ์ํด์ผ ํฉ๋๋ค(์: ์ ์ด๋ ์ ๋ ฅ ํ๋, ํด๋ฆญ์ ๋ํ ์ฆ๊ฐ์ ์ธ ์๊ฐ์ ํผ๋๋ฐฑ). ๊ธด๊ธํ์ง ์์ ์ ๋ฐ์ดํธ๋ UI๊ฐ ๊ณ ์ฅ๋๊ฑฐ๋ ๋ฐ์์ด ์๋ ๊ฒ์ฒ๋ผ ๋๊ปด์ง๊ฒ ํ์ง ์์ผ๋ฉด์ ์์ ํ๊ฒ ์ง์ฐ๋ ์ ์๋ ๊ฒ๋ค์ ๋๋ค(์: ํํฐ๋ง, ๋ฌด๊ฑฐ์ด ๋ ๋๋ง, ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๊ฒฐ๊ณผ).
-
isPending์ผ๋ก ์๊ฐ์ ํผ๋๋ฐฑ ์ ๊ณตํ๊ธฐ: ํญ์isPendingํ๋๊ทธ๋ฅผ ํ์ฉํ์ฌ ์ฌ์ฉ์์๊ฒ ๋ช ํํ ์๊ฐ์ ์ ํธ๋ฅผ ์ ๊ณตํ์ธ์. ๋ฏธ๋ฌํ ๋ก๋ฉ ํ์๊ธฐ, ํ๋ฆฌ๊ฒ ์ฒ๋ฆฌ๋ ์น์ ๋๋ ๋นํ์ฑํ๋ ์ปจํธ๋กค์ ์ฌ์ฉ์์๊ฒ ์์ ์ด ์งํ ์ค์์ ์๋ ค ์ธ๋ด์ฌ๊ณผ ์ดํด๋ฅผ ๋์ผ ์ ์์ต๋๋ค. ์ด๋ ๋ค์ํ ๋คํธ์ํฌ ์๋๋ก ์ธํด ์ธ์ง๋๋ ์ง์ฐ์ด ์ง์ญ๋ง๋ค ๋ค๋ฅผ ์ ์๋ ๊ตญ์ ์ ์ธ ์ฌ์ฉ์๋ค์๊ฒ ํนํ ์ค์ํฉ๋๋ค. -
๊ณผ๋ํ ์ฌ์ฉ ํผํ๊ธฐ: ๋ชจ๋ ์ํ ์
๋ฐ์ดํธ๊ฐ ์ ํ์ผ ํ์๋ ์์ต๋๋ค. ๊ฐ๋จํ๊ณ ๋น ๋ฅธ ์
๋ฐ์ดํธ๋ฅผ
startTransition์ผ๋ก ๊ฐ์ธ๋ ๊ฒ์ ์๋นํ ์ด์ ์์ด ๋ฏธ๋ฏธํ ์ค๋ฒํค๋๋ฅผ ์ถ๊ฐํ ์ ์์ต๋๋ค. ์ ํ์ ์ง์ ์ผ๋ก ๊ณ์ฐ ์ง์ฝ์ ์ด๊ฑฐ๋, ๋ณต์กํ ์ฌ๋ ๋๋ง์ ํฌํจํ๊ฑฐ๋, ๋์ ๋๋ ์ง์ฐ์ ์ ๋ฐํ ์ ์๋ ๋น๋๊ธฐ ์์ ์ ์์กดํ๋ ์ ๋ฐ์ดํธ๋ฅผ ์ํด ์๊ปด๋์ธ์. -
Suspense์์ ์ํธ์์ฉ ์ดํดํ๊ธฐ: ์ ํ์ React์Suspense์ ํ๋ฅญํ๊ฒ ์๋ํฉ๋๋ค. ๋ง์ฝ ์ ํ์ด ์ปดํฌ๋ํธ๋ฅผsuspend์ํค๋ ์ํ๋ฅผ ์ ๋ฐ์ดํธํ๋ค๋ฉด(์: ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์ค), React๋ ์ ๋ฐ์ดํฐ๊ฐ ์ค๋น๋ ๋๊น์ง ์ด์ UI๋ฅผ ํ๋ฉด์ ์ ์งํ์ฌ ๊ฐ์์ค๋ฌ์ด ๋น ์ํ๋ ๋์ฒด UI๊ฐ ์กฐ๊ธฐ์ ๋ํ๋๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค. ์ด๋ ๋ ๊ณ ๊ธ ์ฃผ์ ์ด์ง๋ง ๊ฐ๋ ฅํ ์๋์ง ํจ๊ณผ์ ๋๋ค. - ๋ฐ์์ฑ ํ ์คํธํ๊ธฐ: `useTransition`์ด ๋ฒ๋ฒ ๊ฑฐ๋ฆผ์ ํด๊ฒฐํ๋ค๊ณ ๊ฐ์ ํ์ง ๋ง์ธ์. ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ์์ ์๋ฎฌ๋ ์ด์ ๋ ๋๋ฆฐ ๋คํธ์ํฌ ์กฐ๊ฑด์ด๋ ์ค๋กํ๋ง๋ CPU ํ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๊ทน์ ์ผ๋ก ํ ์คํธํ์ธ์. ๋ณต์กํ ์ํธ์์ฉ ์ค UI๊ฐ ์ด๋ป๊ฒ ๋ฐ์ํ๋์ง ์ฃผ์ ๊น๊ฒ ๊ด์ฐฐํ์ฌ ์ํ๋ ์์ค์ ์ ๋์ฑ์ ํ์ธํ์ธ์.
-
๋ก๋ฉ ํ์๊ธฐ ํ์งํํ๊ธฐ: ๋ก๋ฉ ๋ฉ์์ง์
isPending์ ์ฌ์ฉํ ๋, ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ง์ํ๋ ๊ฒฝ์ฐ ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํด ์ด๋ฌํ ๋ฉ์์ง๊ฐ ํ์งํ๋์ด ๋ชจ๊ตญ์ด๋ก ๋ช ํํ ์์ฌ์ํต์ ์ ๊ณตํ๋์ง ํ์ธํ์ธ์.
"Experimental"์ ์ฑ๊ฒฉ๊ณผ ๋ฏธ๋ ์ ๋ง
experimental_useTransition์ experimental_ ์ ๋์ฌ๋ฅผ ์ธ์งํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ด ์ ๋์ฌ๋ ํต์ฌ ๊ฐ๋
๊ณผ API๊ฐ ๋์ฒด๋ก ์์ ์ ์ด๊ณ ๊ณต๊ฐ ์ฌ์ฉ์ ์๋ํ๊ณ ์์ง๋ง, ์ ๋์ฌ ์์ด ๊ณต์์ ์ผ๋ก useTransition์ด ๋๊ธฐ ์ ์ ์ฌ์ํ ๋ธ๋ ์ดํน ์ฒด์ธ์ง๋ API ๊ฐ์ ์ด ์์ ์ ์์์ ๋ํ๋
๋๋ค. ๊ฐ๋ฐ์๋ค์ ์ด๋ฅผ ์ฌ์ฉํ๊ณ ํผ๋๋ฐฑ์ ์ ๊ณตํ๋๋ก ๊ถ์ฅ๋์ง๋ง, ์ด๋ฌํ ์ฝ๊ฐ์ ์กฐ์ ๊ฐ๋ฅ์ฑ์ ์ธ์งํด์ผ ํฉ๋๋ค.
์์ ์ ์ธ useTransition์ผ๋ก์ ์ ํ(์ดํ์ ์ด๋ฃจ์ด์ก์ง๋ง, ์ด ๊ฒ์๋ฌผ์ ๋ชฉ์ ์ ์ํด `experimental_` ๋ช
์นญ์ ๊ณ ์ํจ)์ ์ง์ ์ผ๋ก ์ฑ๋ฅ์ด ๋ฐ์ด๋๊ณ ์ฆ๊ฑฐ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ๊ตฌ์ถํ๊ธฐ ์ํ ๋๊ตฌ๋ก ๊ฐ๋ฐ์์๊ฒ ํ์ ์ค์ด์ฃผ๋ ค๋ React์ ์ฝ์์ ๋ช
ํํ ๋ณด์ฌ์ค๋๋ค. ์ ํ์ ์ด์์ผ๋ก ํ๋ ๋์์ฑ ๋ชจ๋๋ React๊ฐ ์
๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐฉ์์ ์์ด ๊ทผ๋ณธ์ ์ธ ๋ณํ์ด๋ฉฐ, ๋ฏธ๋์ ๋ ๋ฐ์ ๋ ๊ธฐ๋ฅ๊ณผ ํจํด์ ์ํ ๊ธฐ๋ฐ์ ๋ง๋ จํฉ๋๋ค.
React ์ํ๊ณ์ ๋ฏธ์น๋ ์ํฅ์ ์ฌ๋ํฉ๋๋ค. React๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๊ตฌ์ถ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ ์์ํฌ๋ ์ด๋ฌํ ๊ธฐ๋ฅ์ ์ ์ ๋ ํ์ฉํ์ฌ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ฐ์์ฑ์ ์ ๊ณตํ ๊ฒ์ ๋๋ค. ๊ฐ๋ฐ์๋ค์ ๋ณต์กํ ์๋ ์ต์ ํ๋ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์์กดํ์ง ์๊ณ ๋ ๊ณ ์ฑ๋ฅ UI๋ฅผ ๋ ์ฝ๊ฒ ๋ฌ์ฑํ ์ ์๊ฒ ๋ ๊ฒ์ ๋๋ค.
์ผ๋ฐ์ ์ธ ํจ์ ๊ณผ ๋ฌธ์ ํด๊ฒฐ
experimental_useTransition๊ณผ ๊ฐ์ ๊ฐ๋ ฅํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋๋ผ๋ ๊ฐ๋ฐ์๋ ๋ฌธ์ ์ ๋ถ๋ชํ ์ ์์ต๋๋ค. ์ผ๋ฐ์ ์ธ ํจ์ ์ ์ดํดํ๋ฉด ์๋นํ ๋๋ฒ๊น
์๊ฐ์ ์ ์ฝํ ์ ์์ต๋๋ค.
-
isPendingํผ๋๋ฐฑ์ ์์ด๋ฒ๋ฆฌ๋ ๊ฒฝ์ฐ: ํํ ์ค์๋startTransition์ ์ฌ์ฉํ์ง๋ง ์๊ฐ์ ํผ๋๋ฐฑ์ ์ ๊ณตํ์ง ์๋ ๊ฒ์ ๋๋ค. ๋ฐฑ๊ทธ๋ผ์ด๋ ์์ ์ด ์งํ๋๋ ๋์ ์๋ฌด๊ฒ๋ ๋์ ๋๊ฒ ๋ณํ์ง ์์ผ๋ฉด ์ฌ์ฉ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ฉ์ท๊ฑฐ๋ ๊ณ ์ฅ ๋ฌ๋ค๊ณ ์ธ์ํ ์ ์์ต๋๋ค. ํญ์ ์ ํ์ ๋ก๋ฉ ํ์๊ธฐ๋ ์์ ์๊ฐ์ ์ํ์ ํจ๊ป ์ฌ์ฉํ์ธ์. -
๋๋ฌด ๋ง๊ฑฐ๋ ๋๋ฌด ์ ๊ฒ ๊ฐ์ธ๋ ๊ฒฝ์ฐ:
- ๋๋ฌด ๋ง์ด: *๋ชจ๋ * ์ํ ์
๋ฐ์ดํธ๋ฅผ
startTransition์ผ๋ก ๊ฐ์ธ๋ฉด ๊ทธ ๋ชฉ์ ์ ์๊ฒ ๋์ด ๋ชจ๋ ๊ฒ์ด ๊ธด๊ธํ์ง ์๊ฒ ๋ฉ๋๋ค. ๊ธด๊ธ ์ ๋ฐ์ดํธ๋ ์ฌ์ ํ ๋จผ์ ์ฒ๋ฆฌ๋๊ฒ ์ง๋ง, ๊ตฌ๋ถ์ ์๊ณ ์ด๋ ์์ด ์ฝ๊ฐ์ ์ค๋ฒํค๋๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. ์ง์ ์ผ๋ก ๋ฒ๋ฒ ๊ฑฐ๋ฆผ์ ์ ๋ฐํ๋ ๋ถ๋ถ๋ง ๊ฐ์ธ์ธ์. - ๋๋ฌด ์ ๊ฒ: ๋ณต์กํ ์ ๋ฐ์ดํธ์ ์์ ๋ถ๋ถ๋ง ๊ฐ์ธ๋ฉด ์ํ๋ ๋ฐ์์ฑ์ ์ป์ง ๋ชปํ ์ ์์ต๋๋ค. ๋ฌด๊ฑฐ์ด ๋ ๋๋ง ์์ ์ ํธ๋ฆฌ๊ฑฐํ๋ ๋ชจ๋ ์ํ ๋ณ๊ฒฝ์ด ์ ํ ๋ด์ ์๋์ง ํ์ธํ์ธ์.
- ๋๋ฌด ๋ง์ด: *๋ชจ๋ * ์ํ ์
๋ฐ์ดํธ๋ฅผ
- ๊ธด๊ธ vs. ๊ธด๊ธํ์ง ์์์ ์๋ชป ์๋ณํ๋ ๊ฒฝ์ฐ: ๊ธด๊ธ ์ ๋ฐ์ดํธ๋ฅผ ๊ธด๊ธํ์ง ์์ ๊ฒ์ผ๋ก ์๋ชป ๋ถ๋ฅํ๋ฉด ๊ฐ์ฅ ์ค์ํ ๋ถ๋ถ(์: ์ ๋ ฅ ํ๋)์์ UI๊ฐ ๋๋ ค์ง ์ ์์ต๋๋ค. ๋ฐ๋๋ก, ์ง์ ์ผ๋ก ๊ธด๊ธํ์ง ์์ ์ ๋ฐ์ดํธ๋ฅผ ๊ธด๊ธํ๊ฒ ๋ง๋ค๋ฉด ๋์์ฑ ๋ ๋๋ง์ ์ด์ ์ ํ์ฉํ ์ ์์ต๋๋ค.
-
startTransition์ธ๋ถ์ ๋น๋๊ธฐ ์์ : ๋น๋๊ธฐ ์์ (๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ฑ)์ ์์ํ ๋ค์startTransition๋ธ๋ก์ด ์๋ฃ๋ *ํ์* ์ํ๋ฅผ ์ ๋ฐ์ดํธํ๋ฉด, ๊ทธ ๋ง์ง๋ง ์ํ ์ ๋ฐ์ดํธ๋ ์ ํ์ ์ผ๋ถ๊ฐ ๋์ง ์์ต๋๋ค.startTransition์ฝ๋ฐฑ์ ์ง์ฐ์ํค๊ณ ์ถ์ ์ํ ์ ๋ฐ์ดํธ๋ฅผ ํฌํจํด์ผ ํฉ๋๋ค. ๋น๋๊ธฐ ์์ ์ ๊ฒฝ์ฐ, `await`์ ๊ทธ ๋ค์์ `set state`๊ฐ ์ฝ๋ฐฑ ๋ด๋ถ์ ์์ด์ผ ํฉ๋๋ค. - ๋์์ฑ ๋ฌธ์ ๋๋ฒ๊น : ๋์์ฑ ๋ชจ๋์์ ๋ฌธ์ ๋ฅผ ๋๋ฒ๊น ํ๋ ๊ฒ์ ์ ๋ฐ์ดํธ์ ๋น๋๊ธฐ์ ์ด๊ณ ์ค๋จ ๊ฐ๋ฅํ ํน์ฑ ๋๋ฌธ์ ๋๋๋ก ์ด๋ ค์ธ ์ ์์ต๋๋ค. React DevTools๋ ๋ ๋๋ง ์ฃผ๊ธฐ๋ฅผ ์๊ฐํํ๊ณ ๋ณ๋ชฉ ํ์์ ์๋ณํ๋ ๋ฐ ๋์์ด ๋๋ "Profiler"๋ฅผ ์ ๊ณตํฉ๋๋ค. React๊ฐ ์ข ์ข ๋์์ฑ ๊ธฐ๋ฅ๊ณผ ๊ด๋ จ๋ ์ ์ฉํ ํํธ๋ฅผ ์ ๊ณตํ๋ฏ๋ก ์ฝ์์ ๊ฒฝ๊ณ ๋ฐ ์ค๋ฅ์ ์ฃผ์๋ฅผ ๊ธฐ์ธ์ด์ธ์.
-
์ ์ญ ์ํ ๊ด๋ฆฌ ๊ณ ๋ ค์ฌํญ: ์ ์ญ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(Redux, Zustand, Context API ๋ฑ)๋ฅผ ์ฌ์ฉํ ๋, ์ง์ฐ์ํค๊ณ ์ถ์ ์ํ ์
๋ฐ์ดํธ๊ฐ
startTransition์ผ๋ก ๊ฐ์ธ์ง ์ ์๋ ๋ฐฉ์์ผ๋ก ํธ๋ฆฌ๊ฑฐ๋๋์ง ํ์ธํ์ธ์. ์ด๋ ์ ํ ์ฝ๋ฐฑ ๋ด์์ ์ก์ ์ ๋์คํจ์นํ๊ฑฐ๋ ์ปจํ ์คํธ ์ ๊ณต์๊ฐ ํ์ํ ๋ ๋ด๋ถ์ ์ผ๋กexperimental_useTransition์ ์ฌ์ฉํ๋๋ก ํ๋ ๊ฒ์ ํฌํจํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
experimental_useTransition ํ
์ ๋งค์ฐ ๋ฐ์์ฑ์ด ๋ฐ์ด๋๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ React ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ๋ ๋ฐ ์์ด ์๋นํ ์ง์ ์ ๋ํ๋
๋๋ค. ๊ฐ๋ฐ์๊ฐ ์ํ ์
๋ฐ์ดํธ์ ์ฐ์ ์์๋ฅผ ๋ช
์์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์๊ฒ ํจ์ผ๋ก์จ, React๋ UI ๋ฉ์ถค์ ๋ฐฉ์งํ๊ณ , ์ธ์ง๋ ์ฑ๋ฅ์ ํฅ์์ํค๋ฉฐ, ์ผ๊ด๋๊ฒ ๋ถ๋๋ฌ์ด ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฐ๋ ฅํ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค.
๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด, ์ฅ์น ๊ธฐ๋ฅ ๋ฐ ์ฌ์ฉ์ ๊ธฐ๋์น๊ฐ ์ผ๋ฐ์ ์ธ ๊ธ๋ก๋ฒ ์ฌ์ฉ์์ ๊ฒฝ์ฐ, ์ด ๊ธฐ๋ฅ์ ๋จ์ํ ํธ์๊ฐ ์๋๋ผ ํ์์ ๋๋ค. ๋ณต์กํ ๋ฐ์ดํฐ, ํ๋ถํ ์ํธ์์ฉ ๋ฐ ๊ด๋ฒ์ํ ๋ ๋๋ง์ ์ฒ๋ฆฌํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด์ ์ ๋์ ์ธ ์ธํฐํ์ด์ค๋ฅผ ์ ์งํ์ฌ ์ ์ธ๊ณ ์ฌ์ฉ์๊ฐ ์ํํ๊ณ ๋งค๋ ฅ์ ์ธ ๋์งํธ ๊ฒฝํ์ ์ฆ๊ธธ ์ ์๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.
experimental_useTransition๊ณผ Concurrent React์ ์์น์ ์์ฉํ๋ฉด ์๋ฒฝํ๊ฒ ์๋ํ ๋ฟ๋ง ์๋๋ผ ์๋์ ๋ฐ์์ฑ์ผ๋ก ์ฌ์ฉ์๋ฅผ ๊ธฐ์๊ฒ ํ๋ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋ค ์ ์์ต๋๋ค. ํ๋ก์ ํธ์์ ์คํํด ๋ณด๊ณ , ์ด ๊ฐ์ด๋์ ์ค๋ช
๋ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ ์ฉํ๋ฉฐ, ๊ณ ์ฑ๋ฅ ์น ๊ฐ๋ฐ์ ๋ฏธ๋์ ๊ธฐ์ฌํ์ธ์. ์ง์ ์ผ๋ก ๋ฒ๋ฒ
๊ฑฐ๋ฆผ ์๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ํฅํ ์ฌ์ ์ ์์กฐ๋กญ๊ฒ ์งํ ์ค์ด๋ฉฐ, experimental_useTransition์ ๊ทธ ๊ธธ์์ ๊ฐ๋ ฅํ ๋๋ฐ์์
๋๋ค.